@import (reference) "./../../shared/color";
@import (reference) "./../../shared/common";
@import (reference) "./../../shared/constants";
@width-quote-head: 360px;
@height-quote-row: 40px;
@color-light-gray: #999;
.text-black {
  color: @list-text-black;
}

.quote-table {
  position: relative;
  user-select: none;
  .flex-container {
    .display-flex(row);
    .flex();
    width: 100%;
    height: 100%;
  }
  .scroll-wrapper {
    position: relative;
  }
  .quote-table-head,
  .quote-table-body {
    flex-grow: 1;
    height: 100%;
  }
  .quote-table-head {
    min-width: 200px;
    .quote-table-cell {
      // text-align: left;
    }
    .quote-table-main{
      // height: calc(~"100% - 30px");
      // overflow-y: auto
      .quote-table-row {
        &:hover {
          .quote-table-cell {
            background-color: #F6F6F6;
          }
        }
      }
    }
  }

  .quote-table-body {
    .quote-table-main{
      // height: calc(~"100% - 30px");
      // overflow-y: auto
      .quote-table-row {
        &:hover {
          .quote-table-cell {
            background-color: #F6F6F6;
          }
        }
      }
    }
  }
  .quote-table-body {
    overflow-x: auto;
    &::-webkit-scrollbar {
      width: 6px;
      height: 10px;
      opacity: 0.3;
    }
    &::-webkit-scrollbar-track {
      height: 10px;
      border-radius: 4px;
      background-color: #FFF;
      border-left: 1px solid #EEE;
      border-top: 1px solid #EEE;
    }
    &.fixed-width {
      .quote-table-row {
        min-width: 1140px;
      }
    }
    .quote-table-row {
      .quote-table-cell {
        text-align: right;
        &.order-cell {
          width: 3em;
          .flex-grow(0);
        }
      }
    }

  }
  .quote-table-row {
    white-space: nowrap;
    display: flex;
    align-items: center;
    // &:nth-child(2n) {
    //   background-color: @list-bg-grey;
    // }
    &.quote-table-header {
      .quote-table-header-link {
        color: #656565;
        cursor: pointer;
        &:hover,
        &:active,
        &.active {
          color: #535353;
          text-decoration: none;
          &::after {}
        }
      }
      .quote-table-cell.active {
        position: relative;
      }
    }
    .quote-table-cell {
      .text-black;
      width: 1px;
      flex-grow: 1;
      flex-shrink: 1;
      justify-content: space-between;
      overflow: hidden;
      // text-overflow: ellipsis;
      cursor: default;
      // margin: 0 0 1px 1px;
      box-sizing: content-box;
      border-bottom: 1px solid @color-gray-main;
      border-left: 1px solid @color-gray-main;
      background: white;
      padding: 0 4px;
      height: 30px;
      line-height: 30px;
      font-size: 1.4rem;
      .font-mono;
      @media (max-width: @screen-lg-min) {
        padding: 0 4px;
      }
      .quote-symbol {
        color: @color-light-gray
      }
      &.append-module {
        overflow: visible;
        position: relative;
      }
      &.text-go-up {
        color: @color-red-red;
      }
      &.text-go-down {
        color: @color-green-gray;
      }
      &.text-percent {
        &::after {
          content: "%"
        }
      }
      &.table-cell-name {
        .flex-grow(1.5);
      }
      &.table-cell-order {
        .flex-grow(.5);
      }
    }
  }
  &.quote-table-responsive {
    height: 100%;
    &.quote-table-with-pagination {
      // height: calc(~"100% - 30px");
    }
    .quote-table-head,
    .quote-table-body {
      overflow-y: hidden;
    }
  }
  quote-table-row {
    &.active {
      .quote-table-row {
        background-color: @color-gray-view-background;
        .quote-table-cell {
          background-color: @color-gray-view-background;
        }
      }
    }
  }
}

.quote-table.quote-with-scrollable {
  background-color: @color-white;
  .quote-table-row {
    quote-table-cell:last-child {
      .quote-table-cell {
        padding-right: @space-common;
      }
    }
  }
  // padding-right: 10px;
}

.grid-table {
  .quote-table-main {
    border-top: 1px solid @color-gray-main;
  }
  .quote-table-row+.quote-table-row {
    border-top: 1px solid @color-gray-main;
  }
  .quote-table-cell+.quote-table-cell {
    border-left: 1px solid @color-gray-main;
  }
}